﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="MvcApplication1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Sample_Ajax
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        loadChart = function () {
            var period          = $("#period option:selected").val();
            var chartType       = $("#chartType option:selected").val();
            var chartTemplate   = $("#chartTemplate option:selected").val();

            $.ajax({
                url: "/Home/GetSalesXmlData",
                type: "POST",
                data: { chartType: chartType, chartTemplate: chartTemplate, period: period },
                dataType: "application/JSON",
                success: function (data) {
                    Chart01.xmlData   = data;
                    Chart01.chartType = chartType;
                    Chart01.showChart();
                }
            });
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Ajax sample</h2>
    <br />
    Period:
    <select id="period" onchange="loadChart();">
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    Type:
    <select id="chartType" onchange="loadChart();">
        <option value="Area2DChart">Area 2D Chart</option>
        <option value="Bar2DChart">Bar 2D Chart</option>
        <option value="Column2DChart">Column 2D Chart</option>
        <option value="Column3DChart">Column 3D Chart</option>
        <option value="LineChart">Line Chart</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp; 
    Template:
    <select id="chartTemplate" onchange="loadChart();">
        <option value="OfficeTemplate">Office</option>
        <option value="OfficeLightTemplate">Office Light</option>
        <option value="OfficeDarkTemplate">Office Dark</option>
        <option value="OceanTemplate">Ocean</option>
    </select>
    <hr />
    <%=Html.FChart("Chart01", ViewData["MyChart"], 600, 400)%>

</asp:Content>
